<template>
  <h3 style="margin-bottom: 20px">金属</h3>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane :label="'支出(' + totalOut + ')'" name="first">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="日期" prop="date" />
        <el-table-column label="图片">
          <template #default="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.img"
              :preview-src-list="[scope.row.img]"
              :preview-teleported="true"
              :z-index="9999"
              :hide-on-click-modal="true"
            />
          </template>
        </el-table-column>
        <el-table-column label="金额" prop="money" />
        <el-table-column label="收款人" prop="payee" />
        <el-table-column label="备注" prop="remark" />
      </el-table>
    </el-tab-pane>
    <el-tab-pane
      :label="'回收明细(' + totalDetail.toFixed(4) + ')'"
      name="second"
    >
      <el-table :data="tableData2" style="width: 100%">
        <el-table-column label="日期" prop="date" />
        <el-table-column label="图片">
          <template #default="scope">
            <el-image
              style="width: 50px; height: 50px; margin-right: 10px"
              v-for="(item, index) in scope.row.detail"
              :key="index"
              :src="item"
              :preview-src-list="scope.row.detail"
              :preview-teleported="true"
              :hide-on-click-modal="true"
            />
          </template>
        </el-table-column>
        <el-table-column label="金额" prop="money" />
        <el-table-column label="收款人" prop="payee" />
        <el-table-column label="备注" prop="remark" />
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="收入(0)" name="third">暂无</el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";

const metal = import.meta.glob("../assets/images/metal/*", { eager: true });
const metal2 = import.meta.glob("../assets/images/metal2/*", { eager: true });

import detail5 from "../assets/images/metal2/8-29-1.png";
import detail6 from "../assets/images/metal2/8-30-1.jpeg";
import detail7 from "../assets/images/metal2/8-30-2.jpeg";
import detail8 from "../assets/images/metal2/8-31-1.jpeg";
import detail9 from "../assets/images/metal2/8-31-2.jpeg";
import detail10 from "../assets/images/metal2/8-31-3.png";
import detail11 from "../assets/images/metal2/8-31-4.jpeg";
import detail12 from "../assets/images/metal2/8-31-5.jpeg";
import detail13 from "../assets/images/metal2/8-31-6.jpeg";
import detail14 from "../assets/images/metal2/8-31-7.jpeg";
const activeName = ref("first");

const tableData: any = [
  {
    date: "2024-08-28",
    money: 50,
    payee: "洪杰",
    remark: "往来款，包含李5w",
    img: (metal["../assets/images/metal/metal-8-28.jpg"] as any).default,
  },
  {
    date: "2024-09-03",
    money: 50,
    payee: "洪杰",
    remark: "",
    img: (metal["../assets/images/metal/metal-9-3.jpg"] as any).default,
  },
];

const totalOut = computed(() => {
  return tableData.reduce((sum: number, item: any) => {
    return (sum += item.money);
  }, 0);
});

const tableData2: any = [
  {
    date: "2024-08-28",
    money: 10,
    payee: "娄国标",
    remark: "工商转账",
    detail: [
      (metal2["../assets/images/metal2/8-28-1.jpeg"] as any).default,
      (metal2["../assets/images/metal2/8-28-2.jpeg"] as any).default,
    ],
  },
  {
    date: "2024-08-28",
    money: 1.3213,
    payee: "CoCo",
    remark: "微信转账",
    detail: [
      (metal2["../assets/images/metal2/8-28-3.jpeg"] as any).default,
      (metal2["../assets/images/metal2/8-28-4.jpeg"] as any).default,
    ],
  },
  {
    date: "2024-08-29",
    money: 30,
    payee: "俞雪良",
    remark: "工商转账",
    detail: [(metal2["../assets/images/metal2/8-29-1.png"] as any).default],
  },
  {
    date: "2024-08-30",
    money: 0.4626,
    payee: "娄国标",
    remark: "工商转账,28号娄国标的尾款",
    detail: [
      (metal2["../assets/images/metal2/8-30-1.jpeg"] as any).default,
      (metal2["../assets/images/metal2/8-30-2.jpeg"] as any).default,
    ],
  },
  {
    date: "2024-08-31",
    money: 2.5695,
    payee: "蒋志良",
    remark: "工商转账",
    detail: [
      (metal2["../assets/images/metal2/8-31-1.jpeg"] as any).default,
      (metal2["../assets/images/metal2/8-31-2.jpeg"] as any).default,
    ],
  },
  {
    date: "2024-08-31",
    money: 8.734,
    payee: "胡小文",
    remark: "工商转账,两笔款一起打",
    detail: [
      (metal2["../assets/images/metal2/8-31-3.png"] as any).default,
      (metal2["../assets/images/metal2/8-31-4.jpeg"] as any).default,
      (metal2["../assets/images/metal2/8-31-5.jpeg"] as any).default,
    ],
  },
  {
    date: "2024-08-31",
    money: 4.728,
    payee: "俞雪良",
    remark: "工商转账,29号俞雪良的尾款",
    detail: [
      (metal2["../assets/images/metal2/8-31-6.jpeg"] as any).default,
      (metal2["../assets/images/metal2/8-31-7.jpeg"] as any).default,
    ],
  },
  {
    date: "2024-09-02",
    money: 7.6364,
    payee: "..",
    remark: "转账图片暂缺失",
    detail: [],
  },
  {
    date: "2024-09-02",
    money: 2,
    payee: "王关士",
    remark: "先转两万",
    detail: [(metal2["../assets/images/metal2/9-02-4.jpg"] as any).default],
  },
  {
    date: "2024-09-04",
    money: 1.082,
    payee: "王关士",
    remark: "9月2号的尾款",
    detail: [
      (metal2["../assets/images/metal2/9-04-1.jpg"] as any).default,
      (metal2["../assets/images/metal2/9-04-2.jpg"] as any).default,
    ],
  },
  {
    date: "2024-09-07",
    money: 5.6568,
    payee: "沈红华",
    remark: "工商转账",
    detail: [
      (metal2["../assets/images/metal2/9-07-1.jpg"] as any).default,
      (metal2["../assets/images/metal2/9-07-2.jpg"] as any).default,
    ],
  },
  {
    date: "2024-09-07",
    money: 0.514,
    payee: "coco",
    remark: "微信转账",
    detail: [
      (metal2["../assets/images/metal2/9-07-3.jpg"] as any).default,
      (metal2["../assets/images/metal2/9-07-4.jpg"] as any).default,
      (metal2["../assets/images/metal2/9-07-5.jpg"] as any).default,
    ],
  },
  {
    date: "2024-09-10",
    money: 5.803,
    payee: "",
    remark: "两笔工商转账 2.2125+3.5905，转账图片暂缺失",
    detail: [(metal2["../assets/images/metal2/9-10-1.jpg"] as any).default],
  },
  {
    date: "2024-09-13",
    money: 8,
    payee: "坤林",
    remark: "现金8",
    detail: [(metal2["../assets/images/metal2/9-13-1.jpg"] as any).default],
  },
  {
    date: "2024-09-13",
    money: 5,
    payee: "莫金良",
    remark: "工商转账",
    detail: [
      (metal2["../assets/images/metal2/9-13-2.jpg"] as any).default,
      (metal2["../assets/images/metal2/9-13-3.jpg"] as any).default,
    ],
  },
  {
    date: "2024-09-13",
    money: 4.652,
    payee: "",
    remark: "工商转账, 图片暂缺",
    detail: [],
  },
  {
    date: "2024-09-13",
    money: 6.699,
    payee: "",
    remark: "工商转账, 图片暂缺",
    detail: [],
  },
  {
    date: "2024-09-14",
    money: 9,
    payee: "娄国标",
    remark: "工商转账",
    detail: [
      (metal2["../assets/images/metal2/9-14-1.jpg"] as any).default,
      (metal2["../assets/images/metal2/9-14-2.jpg"] as any).default,
    ],
  },
  {
    date: "2024-09-14",
    money: 5.941,
    payee: "胡小文",
    remark: "工商转账",
    detail: [
      (metal2["../assets/images/metal2/9-14-3.jpg"] as any).default,
      (metal2["../assets/images/metal2/9-14-4.jpg"] as any).default,
    ],
  },
  {
    date: "2024-09-14",
    money: 4.6988,
    payee: "胡小文",
    remark: "工商转账",
    detail: [
      (metal2["../assets/images/metal2/9-14-5.jpg"] as any).default,
      (metal2["../assets/images/metal2/9-14-6.jpg"] as any).default,
    ],
  },
  {
    date: "2024-09-16",
    money: 1.2325,
    payee: "莫金良",
    remark: "工商转账，尾款",
    detail: [
      (metal2["../assets/images/metal2/9-16-1.jpg"] as any).default,
      (metal2["../assets/images/metal2/9-16-2.jpg"] as any).default,
    ],
  },
  {
    date: "2024-09-16",
    money: 2.5579,
    payee: "娄国标",
    remark: "工商转账，尾款",
    detail: [(metal2["../assets/images/metal2/9-16-3.jpg"] as any).default],
  },
  {
    date: "2024-09-16",
    money: 1.1128,
    payee: "徐军",
    remark: "工商转账，尾款",
    detail: [(metal2["../assets/images/metal2/9-16-4.jpg"] as any).default],
  },
  {
    date: "2024-09-16",
    money: 0.775,
    payee: "海明",
    remark: "微信转账，尾款 7370元+380元",
    detail: [
      (metal2["../assets/images/metal2/9-16-5.jpg"] as any).default,
      (metal2["../assets/images/metal2/9-16-6.jpg"] as any).default,
      (metal2["../assets/images/metal2/9-16-7.jpg"] as any).default,
    ],
  },
  {
    date: "2024-09-17",
    money: 20,
    payee: "王惠松",
    remark: "工商转账",
    detail: [(metal2["../assets/images/metal2/9-17-1.jpg"] as any).default],
  },
  {
    date: "2024-09-16",
    money: 2.56,
    payee: "田海明",
    remark: "工商转账",
    detail: [
      (metal2["../assets/images/metal2/9-17-2.jpg"] as any).default,
      (metal2["../assets/images/metal2/9-17-3.jpg"] as any).default,
    ],
  },
  {
    date: "2024-09-21",
    money: 1.34,
    payee: "王惠松",
    remark: "工商转账，9月17号的尾款",
    detail: [
      (metal2["../assets/images/metal2/9-21-1.jpg"] as any).default,
      (metal2["../assets/images/metal2/9-21-2.jpg"] as any).default,
    ],
  },
];

const totalDetail = computed(() => {
  return tableData2.reduce((sum: number, item: any) => {
    return (sum += item.money);
  }, 0);
});
</script>
